<template>
  <div class="blogClassify_box">
    <div class="row">
      <!-- 分类列表 -->
      <div class="col-md-2" style="padding: 0">
        <div class="classify_list">
          <ul>
            <!-- {{this.$store.state.user.userInfo.username}} -->
            <li
              :class="['全部' == queryInfo.category ? 'active_li' : '']"
              @click="changeCate('全部')"
            >
              全部
            </li>
            <li
              :class="[item == queryInfo.category ? 'active_li' : '']"
              @click="changeCate(item.cid)"
              v-for="(item, index) in categoryList"
              :key="index"
            >
              {{ item.cname }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 文章列表 -->
      <div class="col-md-10">
        <div
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="disabled"
          infinite-scroll-distance="10"
        >
          <div
            class="card_list"
            v-for="list in blogList"
            :key="list.bid"
          >
            <el-card>
              <h5>
                <router-link
                  class="card_title"
                  :to="{
                    name: 'BlogDetail',
                    params: { blogId: list.bid },
                  }"
                >
                  <span>{{ list.title }}</span>
                </router-link>
              </h5>
              <div class="card_detail">
                <div class="rol">
                  <i class="el-icon-user"></i>
                  <span>作者</span>
                  <span>{{ list.author }}</span>
                </div>
                <div class="rol">
                  <i class="el-icon-time"></i>
                  <span>发表于</span>
                  <span>{{ list.time }}</span>
                </div>
                <div class="rol" style="border-right: 1.2px solid #ccc">
                  <i class="el-icon-s-unfold"></i>
                  <span>分类</span>
                  <span>{{ list.cid }}</span>
                </div>
                <!-- <div class="rol" style="border-right: 1.2px solid #ccc">
                  <i class="el-icon-view"></i>
                  <span>阅读量</span>
                  <span>{{ list.statistic.hits }}</span>
                </div>
                <div class="rol">
                  <i class="el-icon-chat-dot-round"></i>
                  <span>评论数</span>
                  <span>{{ list.statistic.commentsNum }}</span>
                </div> -->
              </div>
              <div class="card_desc">
                <p>
                  {{ list.summary }}
                  <!-- {{list.blog.content}} -->
                </p>
              </div>
              <div>
                <el-tag type="success">{{ list.category }}</el-tag>
              </div>
            </el-card>
          </div>
        </div>
        <!-- 加载提示区域 -->
        <div class="tip">
          <div v-loading="busy" element-loading-text="拼命加载中..."></div>
          <p v-if="noMore">没有更多了~</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 分类查询参数
      queryInfo: {
        cur: 1, // 当前页
        size: 3, // 条目
        category: '全部' // 分类名
      },
      myqeryInfo: {
        cur: 1,
        size: 3,
        flag: true
      },
      // 文章列表
      blogList: [],
      total: 0,
      // 分类名列表
      categoryList: [],

      count: 0,
      data: [],
      busy: false
    }
  },
  computed: {
    noMore () {
      return this.queryInfo.size >= this.total || this.myqeryInfo.size >= this.total
    },
    disabled () {
      return this.busy || this.noMore
    }
  },
  methods: {
    // 根据分类查询
    async getArticleListBycategory () {
      const { data: res } = await this.$http.get('/blog/byCategory.do', { params: this.queryInfo })
      console.log('分类文章', res)
      if (res.flag !== true) return this.$message.error('获取文章列表失败！')
      // 文章列表赋值
      this.blogList = res.data.rows
      this.total = res.data.total
    },
    // 获取所有分类名
    async getCategoryList () {
      const { data: res } = await this.$http.get('/category/all.do', { params: this.pageInfo })
      if (res.flag !== true) return this.$message.error('获取文章分类列表数据失败！')
      this.categoryList = res.data.rows
      this.total = res.data.total
    },
    // 获取用户的所有文章
    async getMyArticleList () {
      const { data: res } = await this.$http.get('/blog/all.do', this.myqeryInfo)
      console.log('我的文章', res)
      if (res.flag !== true) {
        this.queryInfo.category = '默认分类'
        this.getArticleListBycategory()
        return this.$message.warning('登陆后才能看到自己发布的文章！')
      }
      this.blogList = res.data.rows
      this.total = res.data.total
    },
    // 改变分类名
    changeCate (newCate) {
      this.queryInfo.category = newCate
      if (newCate === '全部') {
        this.getMyArticleList()
        return
      }
      // console.log(newCate)
      this.getArticleListBycategory()
    },
    // 懒加载
    loadMore () {
      this.busy = true
      setTimeout(async () => {
        if (this.queryInfo.category === '全部') {
          this.myqeryInfo.size += 3
          const { data: res } = await this.$http.get('/blog/all.do',
            { params: this.myqeryInfo })
          console.log('我的懒加载', res)
          this.blogList = res.data.list
          this.total = res.data.total
        } else {
          this.queryInfo.size += 3
          const { data: res } = await this.$http.get('/blog/all.do',
            { params: this.queryInfo })
          // console.log(this.queryInfo.cur)
          console.log(res)
          this.blogList = res.data.list
          this.total = res.data.total
        }

        this.busy = false
      }, 1500)
    }
  },
  created () {
    this.queryInfo.category = '全部'
    this.getCategoryList()
    this.getMyArticleList()
  }
}
</script>

<style lang="less" scoped>
.blogClassify_box {
  min-height: 540px;
  padding: 1% 5%;
  div {
    // border:1px solid green;
  }
  .classify_list {
    position: fixed;
    // border: 1px solid black;
    width: 160px;
    // height: 50%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.2);
    padding: 2% 0;
    ul {
      padding: 0 !important;
      list-style: none;
      li {
        cursor: pointer;
        padding: 5% 2%;
        padding: 10px;
        text-align: center;
        // border:1px solid red;
        transition: all 0.8s;
        color: rgb(0, 174, 255);
      }
      li:hover {
        background: rgb(100, 230, 240);
        margin: 0 -5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        color: #fff;
      }
      .active_li {
        background: rgb(100, 230, 240);
        margin: 0 -5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        color: #fff;
      }
    }
  }

  .card_list {
    .el-card {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      min-height: 200px;
      margin: 0 !important;
      margin-bottom: 5% !important;

      .card_title {
        a:hover {
          text-decoration: none;
        }
        span {
          color: #666;
          font-size: 1.6rem;
        }
        span:hover {
          color: rgb(89, 140, 250);
        }
      }
      .card_detail {
        width: 100%;
        font-size: 12px;
        color: #999;
        padding: 10px 0;
        .rol {
          float: left;
          margin-right: 8px;
          i {
            margin-right: 4px;
          }
          span {
            margin-right: 5px;
          }
        }
      }
      .card_desc {
        width: 100%;
        color: #555;
        font-size: 16px;
        line-height: 2;
        padding-top: 2%;

        p {
          width: 85%;
          overflow: hidden;
          display: -webkit-box; //将元素设为盒子伸缩模型显示
          -webkit-box-orient: vertical; //伸缩方向设为垂直方向
          -webkit-line-clamp: 2; //超出3行隐藏，并显示省略号
        }
      }
    }
  }

  .tip {
    height: 50px;
    text-align: center;
  }
}

@media only screen and (max-width: 1000px) {
  .col-md-2 {
    .classify_list {
      z-index: 9;
      display: flex;
      align-items: center;
      li {
        float: left;
      }
    }
  }
}

body.modal-open {
  padding-right: 0 !important;
  overflow-y: scroll;
}
</style>
